<script setup>

import {CloseBold, Select, View} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {get, post} from "@/net";
import {ElMessage} from "element-plus";

const tableData1 = reactive([])
const tableData2 = reactive([])

const getData1 = () => {
    get('api/article/audit?audit=0',
            (data) => {
                tableData1.value = data
                tableData1.value.forEach((item, i) => {
                    getTypename(1, i, item.tid)
                    item.auditName = '未审核'
                })
                getData2()
            })
}

const getData2 = () => {
    get('api/article/audit?audit=1',
            (data) => {
                tableData2.value = data
                get('api/article/audit?audit=2',
                        (data) => {
                            tableData2.value.push(...data)
                            if (tableData2.value.length !== 0) {
                                tableData2.value.forEach((item, i) => {
                                    getTypename(2, i, item.tid)
                                    if (item.audit === '1') {
                                        item.auditName = '审核通过'
                                    } else if (item.audit === '2'){
                                        item.auditName = '审核未通过'
                                    }
                                })
                            }
                            initData()
                        })
            })
}

const getTypename = (tag, i, tid) => {
    get('api/type/tid?tid=' + tid, (data) => {
        if (tag === 1) tableData1.value[i].type = data.type
        else tableData2.value[i].type = data.type
    })
}

const updateAudit = (aid, audit) => {
    post('api/article/update-audit', {
        aid: aid,
        audit: audit
    }, (message) => {
        getData1()
        ElMessage.success(message)
    })
}

const activeName = ref('first')
const pageSize = 10 // 每页显示的数据数量
const currentPage1 = ref(1) // 当前页码
const total1 = ref(0) // 总数据条数
const pagedData1 = ref([]) // 当前页的数据
const currentPage2 = ref(1) // 当前页码
const total2 = ref(0) // 总数据条数
const pagedData2 = ref([]) // 当前页的数据

// 初始化数据
const initData = () => {
    total1.value = tableData1.value.length
    total2.value = tableData2.value.length
    updatePageData1()
    updatePageData2()
}

// 更新当前页的数据
const updatePageData1 = () => {
    const start = (currentPage1.value - 1) * pageSize
    const end = start + pageSize
    pagedData1.value = tableData1.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange1 = (newPage) => {
    currentPage1.value = newPage
    updatePageData1()
}

// 更新当前页的数据
const updatePageData2 = () => {
    const start = (currentPage2.value - 1) * pageSize
    const end = start + pageSize
    pagedData2.value = tableData2.value.slice(start, end)
}

// 处理页码变化的函数
const handlePageChange2 = (newPage) => {
    currentPage2.value = newPage
    updatePageData2()
}

getData1()
</script>

<template>
    <div class="content">
        <div class="content-top">
            <div style="margin: 16px 30px;font-size: 20px;font-weight: bold">
                审核文章
            </div>
        </div>
        <div class="content-bottom">
            <el-tabs
                    v-model="activeName"
                    type="border-card"
                    class="demo-tabs"
            >
                <el-tab-pane label="未审核" name="first">
                    <div class="content-list">
                        <el-table
                                class="list"
                                border
                                stripe
                                empty-text="没有更多需要审核的文章了，休息一下吧~"
                                :data="pagedData1"
                                :default-sort="{ prop: 'publish_time', order: 'descending' }"
                                style="width: 100%"
                        >
                            <el-table-column prop="title" label="文章标题"  width="180"/>
                            <el-table-column prop="type" label="文章类型" width="180" />
                            <el-table-column prop="publish_time" label="发布时间" sortable />
                            <el-table-column prop="auditName" label="审核状态" sortable>
                                <template #default="scope">
                                    <el-tag
                                            type="primary"
                                            disable-transitions
                                    >{{ scope.row.auditName }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" >
                                <template #default="scope">
                                    <el-button-group>
                                        <el-button type="primary" :icon="View"/>
                                        <el-button type="success" :icon="Select" @click="updateAudit(scope.row.aid, '1')"/>
                                        <el-button type="danger" :icon="CloseBold" @click="updateAudit(scope.row.aid, '2')"/>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-pagination
                                style="margin: 20px 350px"
                                layout="total, prev, pager, next"
                                background
                                :page-size="pageSize"
                                :current-page="currentPage1"
                                :total="total1"
                                @current-change="handlePageChange1"
                        />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="已审核" name="second">
                    <div class="content-list">
                        <el-table
                                class="list"
                                border
                                stripe
                                empty-text="没有已审核的文章数据"
                                :data="pagedData2"
                                :default-sort="{ prop: 'publish_time', order: 'descending' }"
                                style="width: 100%"
                        >
                            <el-table-column prop="title" label="文章标题"  width="180"/>
                            <el-table-column prop="type" label="文章类型" width="180" />
                            <el-table-column prop="publish_time" label="发布时间" sortable />
                            <el-table-column prop="auditName" label="审核状态" sortable>
                                <template #default="scope">
                                    <el-tag
                                            :type="scope.row.audit === '1' ? 'success' : 'danger'"
                                            disable-transitions
                                    >{{ scope.row.auditName }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" >
                                <template #default="scope">
                                    <el-button type="primary" :icon="View"/>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div>
                        <el-pagination
                                style="margin: 20px 350px"
                                layout="total, prev, pager, next"
                                background
                                :page-size="pageSize"
                                :current-page="currentPage2"
                                :total="total2"
                                @current-change="handlePageChange2"
                        />
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<style scoped>
.content {
    width: 1014px;
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    gap: 14px;
}

.content-top {
    width: 1014px;
    height: 60px;
    display: flex;
    flex-direction: row;
    background-color: rgba(255, 255, 255, 0.7)
}

.content-list {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.content-bottom {
    width: 1014px;
    background-color: rgba(255, 255, 255, 0.7)
}
</style>